<template>
	<view class="asks">
	    <view class="asks-view" @click="goodsAsks">
	        <view class="left-view">
	            <text class="bold-text" v-if="asksList && asksList.length">问答</text>
	            <text class="bold-text" v-else>暂无问答</text>
	        </view>
	        <view class="content-view u-margin-left-20"></view>
	        <view v-if="asksList && asksList.length">
	            <u-icon class="collection-icon" name="arrow-right" size="30"></u-icon>
	        </view>
	    </view>
	    <view class="goods-asks u-p-30">
	        <view v-if="asksList && asksList.length">
	            <view class="asks-info u-m-b-20" v-for="(ask, index) in asksList" :key="index" v-if="index < 2">
	                <view class="u-flex u-line-1">
	                    <view class="u-m-r-26 u-flex-1 u-line-1 ask-desc">{{ ask.content }}</view>
	                    <view class="u-font-10 ask-num">{{ ask.reply_num }}个回答</view>
	                </view>
	            </view>
	        </view>
	        <view class="u-text-center u-m-b-20" v-else>
	            <text>商品好不好，问问买过的人吧</text>
	        </view>
	    </view>
	    <view class="u-flex u-row-center u-padding-bottom-30">
	        <text class="comment-btn" v-if="asksList && asksList.length" @click="goodsAsks">查看全部{{asksList.length}}条问题</text>
	        <text class="comment-btn" v-else @click="goodsAsks">问问买家</text>
	    </view>
	</view>
</template>

<script>
    /**
     * 商品详情页资询组件
     *
     * ===== 使用场景 ======
     * 商品详情页。
     *
     * ===== 参数 =====
     * goodsId        商品ID
     */
    import * as API_Members from '@/api/members.js'
	export default {
		data() {
			return {
                params: {
                    page_no: 1,
                    page_size: 10
                },
                asksList: []
			};
		},
        props: {
            goodsId: {
                type: String,
                default: ''
            }
        },
        mounted() {
            setTimeout(() => {
                this.getGoodsConsultations()
            },1000)
        },
        methods: {
            //商品问答
            goodsAsks() {
                this.navigateTo(`/goods-module/goods-asks?goods_id=${this.goodsId}`)
            },
            //商品问答列表
            getGoodsConsultations() {
                API_Members.getGoodsConsultations(this.goodsId, this.params).then(response => {
                    const { data } = response
                    this.asksList = this.asksList.concat(data)
                })
            }
        }
	}
</script>

<style lang="scss" scoped>
    .asks {
        border-radius: 15rpx;
        margin-top: 23rpx;
        background-color: #FFFFFF;
        .asks-view {
            padding: 30rpx;
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;
            .left-view {
                margin-right: 20rpx;
            }
            .bold-text {
                font-weight: bold;
            }
            .content-view {
                flex: 1;
            }
        }
        .ask-desc:before {
            content: '问';
            display: inline-block;
            margin: -4rpx 10rpx 0 0;
            width: 40rpx;
            height: 40rpx;
            line-height: 40rpx;
            border-radius: 50%;
            background: linear-gradient(to right, #3248F2 0%, #5994EC 100%);
            color: #fff;
            font-size: 24rpx;
            vertical-align: middle;
            text-align: center;
        }
        .ask-num {
            color: #999999;
        }
    }

</style>
